<%@ page import="team.bluepen.supermarket.constant.Role" %>
<%@ page import="team.bluepen.supermarket.data.entity.User" %>
<%@ page import="team.bluepen.supermarket.constant.Constant" %>
<%@ page import="team.bluepen.supermarket.constant.Error" %>
<%@ page import="java.io.File" %>
<%@ page import="java.util.List" %>
<%@ page import="team.bluepen.supermarket.util.FileUtil" %>
<%@ page import="team.bluepen.supermarket.web.servlet.FileUploadServlet" %>
<%@ page import="team.bluepen.supermarket.data.hdfs.HdfsManager" %>
<%@ page import="team.bluepen.supermarket.data.entity.PathPack" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<%
    User user = (User) request.getSession().getAttribute(Constant.SESSION_USER);
%>
<head>
    <%-- 个人设置页面 --%>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="${pageContext.request.contextPath}/images/icon.ico" type="/image/x-icon" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/bootstrap.bundle.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/main.css">
    <title>File - Supermarket Manage System</title>
</head>
<body>
<main>
    <%
        String state = request.getParameter("error");
        Error error = Error.getErrorByText(state);
    %>
    <%  if (error != null && !error.getState()) {%>
    <script>alert('Data error!\n<%=error%>')</script>
    <%
        }
    %>
    <div class="d-flex flex-column flex-shrink-0 p-3 bg-light" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" style="width: 20%;min-width: 150px">
        <a href="${pageContext.request.contextPath}/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto link-dark text-decoration-none">
            <span class="fs-4">Supermarket Manage System</span>
        </a>
        <hr>
        <ul class="nav nav-pills flex-column mb-auto">
            <li class="nav-item">
                <a href="overview.jsp" class="nav-link link-dark" aria-current="page">
                    Overview
                </a>
            </li>
            <%
                if (user != null && user.getRole() == Role.ADMIN) {
            %>
            <li>
                <a href="account.jsp" class="nav-link link-dark">
                    Accounts
                </a>
            </li>
            <%
                }
            %>
            <li>
                <a href="manage.jsp" class="nav-link link-dark">
                    All Goods
                </a>
            </li>

            <li>
                <a href="query.jsp" class="nav-link link-dark">
                    Goods Query
                </a>
            </li>
            <li>
                <a href="file.jsp" class="nav-link active">
                    File
                </a>
            </li>
        </ul>
        <hr>
        <div class="dropdown">
            <a href="#" class="d-flex align-items-center link-dark text-decoration-none dropdown-toggle" id="dropdownUser2" data-bs-toggle="dropdown" aria-expanded="false">
                <strong><%=user.getUsername()%></strong>
            </a>
            <ul class="dropdown-menu text-small shadow" aria-labelledby="dropdownUser2">
                <li><a class="dropdown-item" href="setting.jsp">Settings</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><form method="post" action="api/logout-control">
                    <button class="dropdown-item" type="submit" value="logout" name="logout">Logout</button>
                </form></li>
            </ul>
        </div>
    </div>
    <div class="d-flex flex-column p-4 allow-rolling">
        <div class="flex-column">
            <h1>File</h1>
        </div>
        <div class="d-inline-flex flex-row ">
            <div class="d-flex flex-column text-lg-start">
                <h2 class="flex-column">Introduction</h2>
                <div class="dropdown-divider"></div>
                <p class="flex-row">Here you can download or upload the file to the server, and the list content in the file will be parsed and uploaded to the database. The downloaded files are also from the database and will be saved in CSV format.<br><br></p>
                <div class="alert alert-warning">
                    <strong>Note: the uploaded file must be in CSV format, otherwise it will not be parsed. </strong>
                </div>
            </div>

        </div>
        <div class="d-flex flex-row p-2" style="min-width: 20%">
            <div class="flex-column">
                <div class="flex-column list-group">
                    <%
                        if (user.getRole() == Role.GUEST) {
                    %>
                        <a class="list-group-item list-group-item-action" href="#">Guest are not allow uploading.</a>
                    <%
                        } else { %>
                        <button type="button" class="list-group-item list-group-item-action" data-bs-toggle="modal" data-bs-target="#file_upload">Upload file</button>
                    <%  }
                    %>
                    <a class="list-group-item list-group-item-action" href="file-download.jsp?target=user" target="_blank">Download Users File</a>
                    <a class="list-group-item list-group-item-action" href="file-download.jsp?target=good" target="_blank">Download Goods File</a>
                </div>
            </div>
        </div>
        <br>
        <div class="d-flex flex-column p-2">
            <h2 class="flex-row">Files Action</h2>
            <hr>
            <%
                List<PathPack> uploadPaths = HdfsManager.getInstance().listAllFile(Constant.UPLOAD_DIRECTORY);
                List<PathPack> outputPaths = HdfsManager.getInstance().listAllFile(Constant.OUTPUT_DIRECTORY);
            %>
            <button type="button" class="btn btn-outline-primary mt-2" data-bs-toggle="modal" data-bs-target="#database_word_count">Start Word Count Job</button>
            <button type="button" class="btn btn-outline-danger mt-2" data-bs-toggle="modal" data-bs-target="#file_delete_all">Clear All Uploaded Files</button>
            <button type="button" class="btn btn-outline-danger mt-2" data-bs-toggle="modal" data-bs-target="#file_delete_output">Clear All Output Files</button>
            <br><h2>File List</h2>
            <div class="d-flex flex-row">
                <div class="flex-grow-1">
                    <ul class="nav nav-pills mb-3" id="file_list_tab" role="tablist">
                        <li class="nav-item" role="presentation">
                            <button class="nav-link active" id="pills_list_upload" data-bs-toggle="pill" data-bs-target="#file_list_upload" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Upload Files</button>
                        </li>
                        <li class="nav-item" role="presentation">
                            <button class="nav-link" id="pills_list_output" data-bs-toggle="pill" data-bs-target="#file_list_output" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Output Files</button>
                        </li>
                    </ul>
                    <div class="tab-content" id="file_list_content">
                        <div class="tab-pane fade show active" id="file_list_upload" role="tabpanel" aria-labelledby="pills_list_upload">
                            <table class="table table-hover">
                                <caption>All Uploaded Files</caption>
                                <thead class="table table-hover" >
                                <tr>
                                    <th>Path</th>
                                    <th>Size</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <%
                                    for (PathPack file : uploadPaths) {
                                %>
                                <tr>
                                    <td><%=file.getPath()%></td>
                                    <td><%=FileUtil.getReadableSize(file.getSize())%></td>
                                    <td>
                                        <form method="post" action="api/download">
                                            <div class="btn-group">
                                                <button class="btn btn-outline-primary" type="button" data-bs-toggle="modal"
                                                        data-bs-target="#file_process" data-bs-path="<%=file.getPath()%>">Process</button>
                                                <input hidden name="path" value="<%=file.getPath()%>">
                                                <button class="btn btn-outline-primary" type="submit">Download</button>
                                                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal"
                                                        data-bs-target="#file_delete_file" data-bs-path="<%=file.getPath()%>">Delete</button>
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                                <%}
                                %>
                                </tbody>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="file_list_output" role="tabpanel" aria-labelledby="pills_list_output">
                            <table class="table table-hover">
                                <caption>All Output Files</caption>
                                <thead class="table table-hover" >
                                <tr>
                                    <th>Path</th>
                                    <th>Size</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>
                                <%
                                    for (PathPack file : outputPaths) {
                                %>
                                <tr>
                                    <td><%=file.getPath()%></td>
                                    <td><%=FileUtil.getReadableSize(file.getSize())%></td>
                                    <td>
                                        <form method="post" action="api/download">
                                            <input hidden name="path" value="<%=file.getPath()%>">
                                            <div class="btn-group">
                                                <button class="btn btn-outline-primary" type="submit">Download</button>
                                                <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal"
                                                        data-bs-target="#file_delete_file" data-bs-path="<%=file.getPath()%>">Delete</button>
                                            </div>
                                        </form>
                                    </td>
                                </tr>
                                <%}
                                %>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="file_upload">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">File Upload</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="api/file-upload" method="post" enctype="multipart/form-data" name="upload_file_form">
                    <div class="modal-body">
                        <div class="alert alert-warning">
                            The maximum size of file upload is 10m. Files that exceed the size limit cannot be uploaded.
                        </div>
                        <input class="form-control" type="file" name="file_upload" id="file_upload_input">
                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-primary" data-bs-dismiss="modal">Confirm</button>
                            <button type="reset" class="btn btn-outline-secondary">Reset</button>
                            <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="file_delete_all">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete All Uploaded Files</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="api/file-delete" method="post" name="delete_file_all_form">
                    <input type="text" name="type" value="all" hidden>
                    <div class="modal-body">
                        <div class="alert alert-danger">
                            <strong>All uploaded files will be deleted and cannot be recovered!</strong>
                            <br>Please check it again!
                        </div>
                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
                            <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="file_delete_output">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Delete All Output Files</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="api/file-delete" method="post" name="delete_file_output_form">
                    <input type="text" name="type" value="output" hidden>
                    <div class="modal-body">
                        <div class="alert alert-danger">
                            <strong>All output files will be deleted and cannot be recovered!</strong>
                            <br>Please check it again!
                        </div>
                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
                            <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="file_delete_file">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">File Delete</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="api/file-delete" method="post" name="delete_file_form">
                    <input type="text" name="type" value="file" hidden>
                    <input type="text" id="delete_file_path" name="path" hidden value="">
                    <div class="modal-body">
                        <div class="alert alert-danger">
                            The selected file will be deleted and cannot be recovered. Please check it again!
                        </div>
                        <p id="current_file_path"></p>
                    </div>

                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Delete</button>
                            <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="file_process">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">File Process</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="api/file-read" method="post" name="read_file_form">
                    <input type="text" name="type" value="good" hidden>
                    <input type="text" id="process_file_path" name="path" hidden value="">
                    <div class="modal-body">
                        <div class="alert alert-danger">
                            The program will process the contents of this file and import it into the database,
                            which may cause irreversible data overwrite.
                        </div>
                        <div class="form-floating mt-3 mb-3">
                            <select class="form-select" id="upload_file_form_type_select" name="file_type">
                                <option value="good">Goods</option>
                                <option value="other">Other</option>
                            </select>
                            <label for="upload_file_form_type_select">Select the type of data</label>
                        </div>
                        <p id="current_file_path_read"></p>
                    </div>
                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-danger" data-bs-dismiss="modal">Confirm</button>
                            <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="modal fade" id="database_word_count">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Word Count</h4>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <form action="api/word-count" method="post" name="word_count_form">
                    <div class="modal-body">
                            This program will process the selected data types and
                            generate files by counting word frequency.
                        <div class="form-floating mt-3 mb-3">
                            <select class="form-select" id="word_count_type_select" name="file_type">
                                <option value="good">Goods</option>
                            </select>
                            <label for="word_count_type_select">Select the data type to be counted.</label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <div class="btn-group">
                            <button type="submit" class="btn btn-outline-primary" data-bs-dismiss="modal">Confirm</button>
                            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</main>

<script>
    const deleteFileModel = document.getElementById('file_delete_file');
    deleteFileModel.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const filePath = button.getAttribute('data-bs-path');
        const deleteFileInput = document.getElementById('delete_file_path');
        const pathCurrent = document.getElementById('current_file_path');
        deleteFileInput.value = filePath;

        pathCurrent.innerHTML = "Current selected file path: " + filePath;
    })

    const processFileModel = document.getElementById('file_process');
    processFileModel.addEventListener('show.bs.modal', function (event) {
        const button = event.relatedTarget;
        const filePath = button.getAttribute('data-bs-path');
        const deleteFileInput = document.getElementById('process_file_path');
        const pathCurrent = document.getElementById('current_file_path_read');
        deleteFileInput.value = filePath;

        pathCurrent.innerHTML = "Current selected file path: " + filePath;
    })
</script>
</body>
</html>